<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="icon" href="../jpg/ram.png" type="image/x-icon">
    <!--导入register.css文件-->
    <link rel="stylesheet" href="../css/sign.css" type="text/css">
    <audio src="../music/bgm.mp3" autoplay="autoplay" loop="loop" id="bgAudio"></audio>

    <script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>

    <script src="../js/jq.snow.js"></script>
    <!--下面是调用方法和参数说明-->
    <script>
        $(function() {
            $.fn.snow({
                minSize: 5, //雪花的最小尺寸
                maxSize: 40, //雪花的最大尺寸
                newOn: 100 //雪花出现的频率 这个数值越小雪花越多
            });
        });
    </script>

</head>

<body>
    <div class="menu">
        <div class="left1">
            <ul>
                <li><img src="../jpg/demo3.png"></li>
                <li><a href="../index.html">首页</a></li>
                <li>
                    <a href="../webs/live.html">随笔</a>
                </li>
                <li>
                    <a href="../webs/fun.html">娱乐</a>
                </li>

                <li><a href="../webs/record.html">留言</a></li>
                <li><a href="../webs/resume.html">个人中心</a></li>

            </ul>

        </div>
        <div class="right1">
            <ul>

                <li>
                    <a href="../webs/set.html" target="_blank"> <img src="../jpg/set.png" width="30px" height="30px"></a>
                </li>
                <li>
                    <a href="../webs/sign.html" target="_blank">
                        <img src="../jpg/logon.png" width="30px" height="30px">
                    </a>
                </li>
                <li>
                    <input type="text" placeholder="请输入..." name="" id="" value="" style="border-top-left-radius: 15px;
                    border-top-right-radius: 15px;
                    border-bottom-left-radius: 15px;
                    border-bottom-right-radius: 15px;" />&nbsp;&nbsp;
                    <a href="../webs/find.html" target="_blank"><button style="border-top-left-radius: 12px;
                    border-top-right-radius: 12px;
                    border-bottom-left-radius: 12px;
                    border-bottom-right-radius: 12px;">搜</button>
                    </a>
                </li>

            </ul>
        </div>
    </div>
    <div class="loginmain">
        <div class="login-title">
            <span>登录页面</span>
        </div>

        <div class="login-con">
            <div class="login-user">
                <div class="icon">
                    <img src="../jpg/user_icon_copy.png" alt="">
                </div>
                <input type="text" id="email" placeholder="邮箱" autocomplete="off" value="">
            </div>
            <div class="login-pwd">
                <div class="icon">
                    <img src="../jpg/key.png" alt="">
                </div>
                <input type="password" id="pwd" placeholder="密码" autocomplete="off" value="">
            </div>
            <div class="login-btn">
                <input type="button" name="chkBtn" id="chkBtn" value="登录">
            </div>
            <div class="login-btn2">
                <input type="button" name="zhuce" id="zhuce" value="注册" onClick=" location.href='../webs/boke.html' ">
            </div>
            <div id="loginMessage" style="color: red; text-align: center; margin-top: 10px;"></div>
        </div>
    </div>

    <div id="jsi-cherry-container " class="container "></div>
    <script>
        //document.getElementById("bgAudio ").volume = 1;//
        // API基础URL
        const API_BASE_URL = 'http://localhost:5000/api';

        // 登录按钮点击事件
        document.getElementById('chkBtn').addEventListener('click', async function() {
            const email = document.getElementById('email').value;
            const password = document.getElementById('pwd').value;
            const loginMessage = document.getElementById('loginMessage');

            // 清除之前的消息
            loginMessage.textContent = '';

            // 简单的表单验证
            if (!email || !password) {
                loginMessage.textContent = '请填写邮箱和密码';
                return;
            }

            try {
                // 发送登录请求
                const response = await fetch(`${API_BASE_URL}/auth/login`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        email: email,
                        password: password
                    })
                });

                const data = await response.json();

                if (response.ok) {
                    // 登录成功
                    loginMessage.style.color = 'green';
                    loginMessage.textContent = '登录成功！';
                    
                    // 保存token和用户信息
                    localStorage.setItem('token', data.token);
                    localStorage.setItem('user', JSON.stringify(data.user));
                    
                    // 1.5秒后跳转到首页
                    setTimeout(() => {
                        window.location.href = '../index.html';
                    }, 1500);
                } else {
                    // 登录失败
                    loginMessage.textContent = data.message || '登录失败，请检查邮箱和密码';
                }
            } catch (error) {
                console.error('登录请求失败:', error);
                loginMessage.textContent = '登录请求失败，请稍后重试';
            }
        });
        $(window).click(function() {
            $('audio ')[0].play();
        });
        var RENDERER = {
            INIT_CHERRY_BLOSSOM_COUNT: 30,
            MAX_ADDING_INTERVAL: 10,

            init: function() {
                this.setParameters();
                this.reconstructMethods();
                this.createCherries();
                this.render();
            },
            setParameters: function() {
                this.$container = $('#jsi-cherry-container ');
                this.width = this.$container.width();
                this.height = this.$container.height();
                this.context = $('<canvas />').attr({
                    width: this.width,
                    height: this.height
                }).appendTo(this.$container).get(0).getContext('2d');
                this.cherries = [];
                this.maxAddingInterval = Math.round(this.MAX_ADDING_INTERVAL * 1000 /
                    this.width);
                this.addingInterval = this.maxAddingInterval;
            },
            reconstructMethods: function() {
                this.render = this.render.bind(this);
            },
            createCherries: function() {
                for (var i = 0, length = Math.round(this.INIT_CHERRY_BLOSSOM_COUNT *
                        this.width / 1000); i <
                    length; i++) {
                    this.cherries.push(new CHERRY_BLOSSOM(this, true));
                }
            },
            render: function() {
                requestAnimationFrame(this.render);
                this.context.clearRect(0, 0, this.width, this.height);
                this.cherries.sort(function(cherry1,
                    cherry2) {
                    return cherry1.z - cherry2.z;
                });
                for (var i = this.cherries.length - 1; i >= 0; i--) {
                    if (!this.cherries[i].render(this.context)) {
                        this.cherries.splice(i, 1);
                    }
                }
                if (--this.addingInterval == 0) {
                    this.addingInterval = this.maxAddingInterval;
                    this.cherries.push(new CHERRY_BLOSSOM(this, false));
                }
            }
        };
        var CHERRY_BLOSSOM = function(renderer, isRandom) {
            this.renderer = renderer;
            this.init(isRandom);
        };
        CHERRY_BLOSSOM.prototype = {
            FOCUS_POSITION: 300,
            FAR_LIMIT: 600,
            MAX_RIPPLE_COUNT: 100,
            RIPPLE_RADIUS: 100,
            SURFACE_RATE: 0.5,
            SINK_OFFSET: 20,
            init: function(isRandom) {
                this.x = this.getRandomValue(-this.renderer.width, this.renderer.width);
                this.y = isRandom ? this.getRandomValue(0, this.renderer.height) : this.renderer.height * 1.5;
                this.z = this.getRandomValue(0, this.FAR_LIMIT);
                this.vx = this.getRandomValue(-2, 2);
                this.vy = -2;
                this.theta = this.getRandomValue(0, Math.PI * 2);
                this.phi = this.getRandomValue(0, Math.PI * 2);
                this.psi = 0;
                this.dpsi = this.getRandomValue(Math.PI / 600, Math.PI / 300);
                this.opacity = 0;
                this.endTheta = false;
                this.endPhi = false;
                this.rippleCount = 0;
                var axis = this.getAxis(),
                    theta = this.theta + Math.ceil(-(this.y + this.renderer.height * this.SURFACE_RATE) / this.vy) * Math.PI / 500;
                theta %= Math.PI * 2;
                this.offsetY = 40 * ((theta <=
                    Math.PI / 2 || theta >= Math.PI * 3 / 2) ? -1 : 1);
                this.thresholdY = this.renderer.height / 2 + this.renderer.height * this.SURFACE_RATE * axis.rate;
                this.entityColor = this.renderer.context.createRadialGradient(0, 40, 0, 0, 40, 80);
                this.entityColor.addColorStop(0,
                    'hsl(330, 70%, ' + 50 * (0.3 + axis.rate) + '%)');
                this.entityColor.addColorStop(0.05, 'hsl(330, 40%,' + 55 * (0.3 + axis.rate) + '%)');
                this.entityColor.addColorStop(1, 'hsl(330, 20%, ' + 70 * (0.3 + axis.rate) + '%)');
                this.shadowColor = this.renderer.context.createRadialGradient(0, 40, 0, 0, 40, 80);
                this.shadowColor.addColorStop(0, 'hsl(330, 40%, ' + 30 * (0.3 + axis.rate) + '%)');
                this.shadowColor.addColorStop(0.05, 'hsl(330, 40%,' + 30 * (0.3 + axis.rate) +
                    '%)');
                this.shadowColor.addColorStop(1, 'hsl(330, 20%, ' + 40 * (0.3 + axis.rate) + '%)');
            },
            getRandomValue: function(min, max) {
                return min + (max - min) * Math.random();
            },
            getAxis: function() {
                var rate = this.FOCUS_POSITION /
                    (this.z + this.FOCUS_POSITION),
                    x = this.renderer.width / 2 + this.x * rate,
                    y = this.renderer.height / 2 - this.y * rate;
                return {
                    rate: rate,
                    x: x,
                    y: y
                };
            },
            renderCherry: function(context, axis) {
                context.beginPath();
                context.moveTo(0,
                    40);
                context.bezierCurveTo(-60, 20, -10, -60, 0, -20);
                context.bezierCurveTo(10, -60, 60, 20, 0, 40);
                context.fill();
                for (var i = -4; i <
                    4; i++) {
                    context.beginPath();
                    context.moveTo(0, 40);
                    context.quadraticCurveTo(i * 12, 10,
                        i * 4, -24 + Math.abs(i) * 2);
                    context.stroke();
                }
            },
            render: function(context) {
                var axis = this.getAxis();
                if (axis.y == this.thresholdY && this.rippleCount < this.MAX_RIPPLE_COUNT) {
                    context.save();
                    context.lineWidth = 2;
                    context.strokeStyle = 'hsla(0, 0%, 100%, ' +
                        (this.MAX_RIPPLE_COUNT - this.rippleCount) / this.MAX_RIPPLE_COUNT + ')';
                    context.translate(axis.x + this.offsetY * axis.rate * (this.theta <= Math.PI ? -1 : 1), axis.y);
                    context.scale(1, 0.3);
                    context.beginPath();
                    context.arc(0,
                        0, this.rippleCount / this.MAX_RIPPLE_COUNT * this.RIPPLE_RADIUS * axis.rate, 0, Math.PI * 2, false);
                    context.stroke();
                    context.restore();
                    this.rippleCount++;
                }
                if (axis.y < this.thresholdY || (!this.endTheta || !this.endPhi)) {
                    if (this.y <= 0) {
                        this.opacity = Math.min(this.opacity + 0.01, 1);
                    }
                    context.save();
                    context.globalAlpha = this.opacity;
                    context.fillStyle = this.shadowColor;
                    context.strokeStyle = 'hsl(330, 30%,' + 40 * (0.3 + axis.rate) + '%)';
                    context.translate(axis.x, Math.max(axis.y, this.thresholdY + this.thresholdY - axis.y));
                    context.rotate(Math.PI - this.theta);
                    context.scale(axis.rate * -Math.sin(this.phi), axis.rate);
                    context.translate(0, this.offsetY);
                    this.renderCherry(context,
                        axis);
                    context.restore();
                }
                context.save();
                context.fillStyle = this.entityColor;
                context.strokeStyle = 'hsl(330, 40%,' + 70 * (0.3 + axis.rate) + '%)';
                context.translate(axis.x, axis.y + Math.abs(this.SINK_OFFSET * Math.sin(this.psi) *
                    axis.rate));
                context.rotate(this.theta);
                context.scale(axis.rate * Math.sin(this.phi), axis.rate);
                context.translate(0, this.offsetY);
                this.renderCherry(context, axis);
                context.restore();
                if (this.y <= -this.renderer.height /
                    4) {
                    if (!this.endTheta) {
                        for (var theta = Math.PI / 2, end = Math.PI * 3 / 2; theta <= end; theta += Math.PI) {
                            if (this.theta < theta && this.theta + Math.PI / 200 > theta) {
                                this.theta = theta;
                                this.endTheta = true;
                                break;
                            }
                        }
                    }
                    if (!this.endPhi) {
                        for (var phi = Math.PI / 8, end = Math.PI * 7 / 8; phi <=
                            end; phi += Math.PI * 3 / 4) {
                            if (this.phi < phi && this.phi + Math.PI / 200 > phi) {
                                this.phi = Math.PI / 8;
                                this.endPhi = true;
                                break;
                            }
                        }
                    }
                }
                if (!this.endTheta) {
                    if (axis.y == this.thresholdY) {
                        this.theta += Math.PI / 200 * ((this.theta <
                            Math.PI / 2 || (this.theta >= Math.PI && this.theta <
                                Math.PI * 3 / 2)) ? 1 : -1);
                    } else {
                        this.theta += Math.PI / 500;
                    }
                    this.theta %= Math.PI * 2;
                }
                if (this.endPhi) {
                    if (this.rippleCount == this.MAX_RIPPLE_COUNT) {
                        this.psi += this.dpsi;
                        this.psi %= Math.PI * 2;
                    }
                } else {
                    this.phi += Math.PI / ((axis.y == this.thresholdY) ? 200 : 500);
                    this.phi %= Math.PI;
                }
                if (this.y <= -this.renderer.height * this.SURFACE_RATE) {
                    this.x += 2;
                    this.y = -this.renderer.height *
                        this.SURFACE_RATE;
                } else {
                    this.x += this.vx;
                    this.y += this.vy;
                }
                return this.z > -this.FOCUS_POSITION && this.z <
                    this.FAR_LIMIT && this.x < this.renderer.width * 1.5;
            }
        };
        $(function() {
            RENDERER.init();
        });
    </script>


</body>

</html>